<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import { useVbenModal } from '@vben/common-ui'
import { message } from 'ant-design-vue'
import type { VxeGridProps } from '#/adapter/vxe-table'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import {
  getBatchMaterialDetail,
} from '#/api/goodsPurchaseProgress2'
const data = ref<any>({})
const columns = ref<any[]>([])

const [Modal, modalApi] = useVbenModal({
  class: 'w-4/5',
  onCancel() {
    modalApi.close()
  },
  onConfirm() {
    modalApi.close()
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>()
    }
  },
})

interface RowType {
  created_at: string
  realname: string
  action_num: number
  gift_num: number
  total_num: number
  price: number
  total_price: number
  warehouse_name: string
  images: string[]
}

const gridOptions: VxeGridProps<RowType> = {
  pagerConfig: {
    enabled: false,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
  ],
  exportConfig: {},
  height: '600px',
  size:'small',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({}) => {
        const res = await getBatchMaterialDetail({
          goods_purchase_id: data.value.info.goods_purchase_id,
          goods_id:data.value.info.scm_goods_id,
        })
        columnsInit(res)

        console.log('res.data', res.data)

        return res.data
        // return {
        //   items: res.data,
        //   total: res.data.length,
        // }
      },
    },
    sort: true,
  },
  showOverflow: false,
  sortConfig: {
    defaultSort: { field: 'created_at', order: 'desc' },
    remote: true,
  },
}
// 初始化表格列
const columnsInit = (res: any) => {
  columns.value = res.detailfieldValue
  const dynamicColumns = columns.value.map((col: any, index: number) => {
    return {
      field: col.value,
      title: col.label,
      width: col.width,
    }
  })
  console.log('dynamicColumns', dynamicColumns)
  gridApi.grid.loadColumn(dynamicColumns)

}
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
})
</script>

<template>
  <Modal title="收料记录">
    <Grid />
  </Modal>
</template>
